<template>
    <div class="searchInput">
        <van-search v-model="inputVal" show-action placeholder="请输入搜索关键词" @search="onSearch" @input="handleInput"
            @focus="handleFocus" @blur="handleBlur">
            <div class="search-font" slot="action" @click="onSearch">搜索</div>
        </van-search>
    </div>
</template>

<script>



export default {
    data() {
        return {
            inputVal: '',
            searchList: [],
            searchArr: [],

        }
    },
    methods: {
        onSearch() {

            if (this.inputVal.trim() === '') return;

            console.log(this.inputVal);

            if (!localStorage.getItem('searchList')) {
                localStorage.setItem('searchList', JSON.stringify([]))
            } else {
                this.searchArr = JSON.parse(localStorage.getItem('searchList'))
            }

            // 增加 -> 先增searchArr -> 查重 -> 再存searchList
            this.searchArr.unshift(this.inputVal)

            // 去重
            this.searchArr = Array.from(new Set(this.searchArr))

            // 存searchList
            localStorage.setItem('searchList', JSON.stringify(this.searchArr))

            // 跳转到列表页
            this.$router.push(`/searchIndex/list?search=${this.inputVal}`)

            this.inputVal = ''

        },
        /** 输入框变化时方法
         */
        handleInput() {
            this.$emit('input', this.inputVal)
        },
        /** 输入框聚焦时触发
         */
        handleFocus() {
            this.$emit('focus', this.inputVal)
        },
        /** 输入框失去焦点时触发
         */
        handleBlur() {
            this.$emit('blur', this.inputVal)
        },



    }
}
</script>

<style scoped>
.van-search {
    width: 100%;
    height: 75px;
}

.search-font {
    color: black;
    font-size: 17px;
    padding-right: 3px;
}
</style>